@themeColor: #48c699;

.card {
  background-color: white;
  transition: .2s;
  border-radius: 6px;
  margin: 5px 0;
  border: @thinBorder;
  padding: 10px;
  display: flex;
  flex-direction: column;
  cursor: pointer;

  &:hover {
    box-shadow: 0 0 12px 2px @borderColor;
  }

  &-main {
    display: flex;
    align-items: stretch;

    img {
      width: 100px;
      border-radius: 3px;
    }

    .info {
      width: calc(100% - 100px);
      padding-left: 10px;

      .info-name {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 17px;
        font-weight: 600;
      }

      .info-desc {
        font-size: 14px;
        color: #999;
        margin-top: 10px;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }

  &-bottom {
    margin-top: 10px;
    display: flex;
    align-items: center;
    flex: 1;

      .item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        border-right: @thinBorder;

        &:last-child {
          border-right: none;
        }

        &:hover {
          color: @themeColor;
        }
      }
  }
}
